<template>
  <!--  <router-link :to="user.id?'':'/login/'" @click="user.id?info:null">-->
  <div @click="info">
    <a-avatar :src="user.photo" class="loginButton" :size="64">
      LOGIN
    </a-avatar>
    <a-modal
        v-model:visible="modalVisible"
        :confirm-loading="modalLoading"
        title="用户操作"
        width="80%"
        :footer="null"
    >
      <div>
        <a-space>
          <a-button style="color: white"
                    type="primary"
                    @click="userInfo"
          >
            修改用户资料
          </a-button>
          <a-popconfirm
              cancel-text="No"
              ok-text="Yes"
              title="请确认是否退出?"
              @confirm="logout"
          >
            <a-button style="color: white"
                      type="danger"
            >
              退出登陆
            </a-button>
          </a-popconfirm>
        </a-space>
      </div>
    </a-modal>
  </div>
  <!--  </router-link>-->

</template>

<script>
import {computed, h, onMounted, ref} from "vue";
import {useStore} from "vuex";
import store from "@/store";
import router from "@/router";
import {message, Modal} from "ant-design-vue";
import axios from "axios";

export default {
  name: "User",
  setup() {
    const user = computed(() => store.state.user)

    const modalVisible = ref(false);
    const modalLoading = ref(false);

    //跳到登陆界面
    const login = () => {
      router.push("/login/")
    }
    const userInfo = () => {
      router.push("/userinfo/" + user.value.id)
    }
    //登出方法
    const logout = () => {
      console.log('退出登陆');
      // user.value.password = hexMd5(user.value.password + KEY);
      axios.get("http://192.168.10.73:8880/user/logout/" + user.value.token).then((res) => {
        const data = res.data;
        if (data.status === 10000) {
          message.success("登出成功!")
          store.commit("setUser", {});
          router.push('/');
          modalVisible.value = false;
        } else {
          message.error(data.msg);
        }
      })
    }
    //点击用户头像，如果已经登陆（已有userID在session中），弹出用户操作框
    //如果未登陆（无userID在session中），调用login方法跳转到登陆画面
    const info = () => {
      if (user.value.id) {
        modalVisible.value = true;
      } else {
        login();
      }
    };

    onMounted(() => {
      // console.log('session1', SessionStorage.get('USER'));
      // console.log('computed', user.value);
      // console.log('store', store.state.user);
      // console.log('test',typeof user.value.id)
    })
    return {
      modalVisible,
      modalLoading,
      user,
      info,
      login,
      logout,
      userInfo
    }
  }

}
</script>

<style scoped>
.loginButton {
  background-color: rgba(0, 245, 208, 0.63);
  box-shadow: 6px 6px 10px 10px rgba(17, 17, 17, 0.53);
}
</style>